<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口测试结果</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        pre {
            outline: 1px solid #ccc;
            padding: 5px;
            margin: 5px;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }
    </style>


</head>
<body>

<div class="container">
    <div>
        <h3 class="text-center">接口测试结果</h3>
    </div>
    <div id="demo">
        <ul>
            <li v-for="res in resultList">

                <strong>{{ res.name }}</strong> &nbsp;&nbsp;{{ res.reqmethod }}-->
                &nbsp;&nbsp;{{ res.url }}&nbsp;&nbsp;
                {% if res.result %}
                <span class="label label-success">成功</span>
                {% else %}
                <span class="label label-danger">失败</span>
                {% endif %}
                &nbsp;{{ res.time }}
                <br>
                {% if not res.result %}
                失败原因：
                <pre>{{ res.reason }}</pre>
                {% endif %}


                具体响应：
                <pre id="result">{{ res.rspbody }}</pre>
                <hr/>

                {% endfor %}
            </li>
        </ul>


    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
    var app = new Vue({
        el: '#demo',
        data: {
            resultList: [
                {
                    "name": "",
                    "reason": "",

                }]
        },
        mounted: function () {
            this.$nextTick(function () {
                this.getres();
            })
        },
        methods: {
            getres: function () {
                axios.get('http://localhost:8888/getResult4').then(function (response) {
                    console.log(response.data.resList);
                    this.resultList = response.data.resList;
                    console.log(this.resultList);
                }).catch(function (error) {
                    alert(error);
                });
            },
            getData: function () {
                var _this = this;
                this.$http.get("http://localhost:8888/getResult4").then(function (res) {
                    console.log(res.body.results);
                    _this.resultList = res.body.resList;
                    console.log(this.resultList);
                });
            },
        }
    })
</script>

</body>
</html>